<template>
  <div ref="shopRanking" class="shopRanking">
    <div ref='provinceRanking' class="provinceRanking"></div>
    <div ref='cityRanking' class="cityRanking"></div>
  </div>
</template>

<script>
  export default {
    name: 'shopRanking',
    components: {

    },
    data() {
      return {

      }
    },
    mounted() {
      this.getEchartProvinceData()
      this.getEchartCityData()
    },
    methods: {
      getEchartProvinceData() {
        const provinceRanking = this.$refs.provinceRanking;
        if (provinceRanking) {
          const myChart = this.$echarts.init(provinceRanking)

          const option = {
            title: {
              text: '购物省份排名（包）',
              left: 'center',
              textStyle: {
                color: "#fff",
                fontWeight: "normal",
                fontSize: 16,
                lineHeight: 40,
              }
            },
            dataset: {
              source: [
                ['score', 'amount', 'product'],
                [89.3, 58212, 'Matcha Latte'],
                [57.1, 78254, 'Milk Tea'],
                [74.4, 41032, 'Cheese Cocoa'],
                [50.1, 12755, 'Cheese Brownie'],
                [89.7, 20145, 'Matcha Cocoa'],
                [68.1, 79146, 'Tea'],
                [19.6, 91852, 'Orange Juice'],
                [10.6, 101852, 'Lemon Juice'],
                [32.7, 20112, 'Walnut Brownie']
              ]
            },
            grid: {
              left: '1%',
              right: '1%',
              top: '30%',
              bottom: '1%',
              containLabel: true
            },
            xAxis: {
              name: 'amount',
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#c3dbff', //更改坐标轴文字颜色
                  fontSize: 10 //更改坐标轴文字大小
                }
              },
              //							axisTick: {
              //								show: false
              //							},
              splitLine: { //网格线
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: '#315070' //更改坐标轴颜色
                }
              }
            },
            yAxis: {
              type: 'category',
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#c3dbff', //更改坐标轴文字颜色
                  fontSize: 10 //更改坐标轴文字大小
                }
              },
              //							axisTick: {
              //								show: false
              //							},
              axisLine: {
                lineStyle: {
                  color: '#315070' //更改坐标轴颜色
                }
              }
            },
            //						visualMap: {
            //							orient: 'horizontal',
            //							left: 'center',
            //							min: 10,
            //							max: 100,
            //							text: ['High Score', 'Low Score'],
            //							// Map the score column to color
            //							dimension: 0,
            //							inRange: {
            //								color: ['#D7DA8B', '#E15457']
            //							}
            //						},
            series: [{
              type: 'bar',
              barWidth: '30%',
              itemStyle: {
                color: '#00FFFF'
              },
              label: {
                normal: {
                  show: true,
                  position: 'right',
                  textStyle: {
                    fontSize: 16,
                    color: '#fff'
                  }
                }
              },
              encode: {
                // Map the "amount" column to X axis.
                x: 'amount',
                // Map the "product" column to Y axis
                y: 'product'
              }
            }]
          };
          myChart.setOption(option)
          window.addEventListener("resize", function() {
            myChart.resize()
          })
        }
        //       this.$on('hook:destroyed', () => {
        //            window.removeEventListener("resize", function() {
        //              myChart.resize();
        //            });
        //          })
      },
      getEchartCityData() {
        const cityRanking = this.$refs.cityRanking;
        if (cityRanking) {
          const myChart = this.$echarts.init(cityRanking)

          const option = {
            title: {
              text: '购物城市排名（包）',
              left: 'center',
              textStyle: {
                color: "#fff",
                fontWeight: "normal",
                fontSize: 16,
                lineHeight: 40,
              }
            },
            dataset: {
              source: [
                ['score', 'amount', 'product'],
                [89.3, 58212, 'Matcha Latte'],
                [57.1, 78254, 'Milk Tea'],
                [74.4, 41032, 'Cheese Cocoa'],
                [50.1, 12755, 'Cheese Brownie'],
                [89.7, 20145, 'Matcha Cocoa'],

              ]
            },
            grid: {
              left: '1%',
              right: '1%',
              top: '30%',
              bottom: '1%',
              containLabel: true
            },
            xAxis: {
              name: 'amount',
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#c3dbff', //更改坐标轴文字颜色
                  fontSize: 10 //更改坐标轴文字大小
                }
              },
              //							axisTick: {
              //								show: false
              //							},
              splitLine: { //网格线
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: '#315070' //更改坐标轴颜色
                }
              }
            },
            yAxis: {
              type: 'category',
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#c3dbff', //更改坐标轴文字颜色
                  fontSize: 10 //更改坐标轴文字大小
                }
              },
              //							axisTick: {
              //								show: false
              //							},

              axisLine: {
                lineStyle: {
                  color: '#315070' //更改坐标轴颜色
                }
              }
            },
            //						visualMap: {
            //							orient: 'horizontal',
            //							left: 'center',
            //							min: 10,
            //							max: 100,
            //							text: ['High Score', 'Low Score'],
            //							// Map the score column to color
            //							dimension: 0,
            //							inRange: {
            //								color: ['#D7DA8B', '#E15457']
            //							}
            //						},
            series: [{
              type: 'bar',
              barWidth: '30%',
              itemStyle: {
                color: '#FFFF00'
              },
              encode: {
                // Map the "amount" column to X axis.
                x: 'amount',
                // Map the "product" column to Y axis
                y: 'product'
              }
            }]
          };
          myChart.setOption(option)
          window.addEventListener("resize", function() {
            myChart.resize()
          })
        }
        //       this.$on('hook:destroyed', () => {
        //            window.removeEventListener("resize", function() {
        //              myChart.resize();
        //            });
        //          })
      },

    }
  }
</script>

<style scoped>
  .shopRanking {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .provinceRanking,
  .cityRanking {
    width: 45%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
